<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <%@ include file="/include/head.jsp"%>
    <title>收货地址</title>
    <link rel="stylesheet" href="${rootPath}/static/plugins/swiper/swiper-3.4.2.min.css">
    <script src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js"></script>
    <script src="${rootPath}/static/js/addressChoose.js" type="text/javascript"></script>
    <script src="${rootPath}/static/js/orderCheck.js" type="text/javascript"></script>
    <script>
        mui.init();
        //页面基础配置
        $(function(){
            //初始化页面vue对象
            initVueObj({
                vueTarget2:"#account"
            });

            //购物车页面不存在分页处理,所以需要单独初始化区域滚动
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });

        });
        var addressListUrl = "${rootPath}/customer/account/address/list.do?";

    </script>
</head>

<body  class="mui-fullscreen">

<header class="mui-bar mui-bar-nav qy-bg-white">
    <span class="mui-left mui-action-back mui-pull-left mui-icon mui-icon-left-nav"></span>
    <h1 class="mui-title" style="position: absolute;margin: 0 !important;">收货地址</h1>
    <span class="mui-icon mui-pull-right qy-position-relative qy-flex qy-full-height shopcarEditHeaderBtn" style="font-size: 16px;">新增</span>
</header>
<div id="account" class="mui-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll qy-padding-top-4px">
                <div class="qy-bg-white qy-padding-left-8px" style="position: relative;">
                    <div class="qy-swiper-control swiper-container" style="width: 100%;height: 100px;" v-for="address in addressList">

                        <div class="swiper-wrapper">
                            <div class="swiper-slide qy-flex qy-flex-fullHeight swiperMainContent" v-on:click="selectAddress(address)">
                                <div class="qy-flex-equalSpace qy-flex qy-flex-text-center">
                                    <img v-if="address.isSelect == true" src="${rootPath}/static/imgs/redCorrect.png" class="redCorrect"/>
                                </div>
                                <div class="qy-flex-bigSpace qy-flex qy-flex-direction-column qy-flex-fullWidth">
                                    <div class="qy-flex-equalSpace qy-flex qy-flex-text-bottom qy-text-red" v-if="address.isSelect == true">
                                        <span>{{address.name}}</span>
                                        <span class="qy-padding-vertical-8">{{address.phone}}</span>
                                        <span v-if="address.def == 1" class="qy-text-red qy-flex labelDefault qy-font-size-14px labelDefaultShow" style="line-height: 14px;">默认</span>
                                    </div>
                                    <div v-else class="qy-flex-equalSpace qy-flex qy-flex-text-bottom">
                                        <span>{{address.name}}</span>
                                        <span class="qy-padding-vertical-8">{{address.phone}}</span>
                                        <span v-if="address.def == 1" class="qy-text-red qy-flex labelDefault qy-font-size-14px labelDefaultShow" style="line-height: 14px;">默认</span>
                                    </div>
                                    <div class="qy-flex-equalSpace qy-flex">
                                        <small>{{address.province}}{{address.city}}{{address.area}}{{address.address}}</small>
                                    </div>
                                </div>
                                <div class="qy-flex-equalSpace qy-flex qy-flex-fullHeight">
                                    <a href="" class="qy-flex qy-flex-text-center qy-flex-equalSpace"><img src="${rootPath}/static/imgs/greyEdit.png" class="redCorrect"/></a>
                                </div>
                            </div>
                            <div :class="{'swiperEditBtn2':address.def == 1,'swiperEditBtn':address.def == 0,'swiper-slide qy-flex qy-flex-fullHeight':true}">
                                <div v-if="address.def == 0" class="qy-flex-equalSpace qy-text-label qy-flex qy-bg-default qy-flex-text-center setToDefault" v-on:click="setDefault(address, '${rootPath}/customer/account/address/update/default.do')">
                                    默认
                                </div>
                                <div class="qy-flex-equalSpace qy-text-white qy-flex qy-bg-red qy-flex-text-center deleteAddress" v-on:click="removeAddress(address, '${rootPath}/customer/account/address/delete.do')">
                                    删除
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
</div>
</body>

</html>